<template>
    <div class="container" v-loading.fullscreen.lock="$store.state.user.isLoading"
         element-loading-background="rgba(255,255,255,0.3)">
        <el-menu mode="horizontal" :default-active="nowIndex">
            <el-menu-item index="Home" @click="$route.name !== 'Home' ? $router.push({name: 'Home'}) : null">
                圣佬团
            </el-menu-item>
            <el-menu-item>
                <el-input placeholder="请输入内容" v-model="queryParam">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </el-menu-item>
            <template v-if="!$store.state.user.isLogin">
                <el-menu-item class="right">
                    <RegBox/>
                </el-menu-item>
                <el-menu-item class="right">
                    <LoginBox/>
                </el-menu-item>
            </template>
            <template v-else>
                <el-menu-item class="right">
                    <el-dropdown @command="handleCommand">
                        <div>
                            <ImageContainer :src="$store.state.user.data.avatar"/>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="my">我的</el-dropdown-item>
                            <el-dropdown-item command="logout">登出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-menu-item>
                <el-menu-item class="right" index="Publish" @click="$route.name !== 'Publish' ? $router.push({name: 'Publish'}) : null">
                    发布
                </el-menu-item>
                <el-menu-item class="right">
                    <i class="el-icon-bell" />
                </el-menu-item>
            </template>
        </el-menu>
        <div class="line"></div>
    </div>
</template>

<script>
    import RegBox from "./RegBox";
    import LoginBox from "./LoginBox";
    import ImageContainer from "../Image/ImageContainer";

    export default {
        name: "NavBar",
        components: {ImageContainer, LoginBox, RegBox},
        data() {
            return {
                queryParam: '', // 查询参数
            };
        },
        computed:{
            nowIndex(){
                return this.$route.name;
            }
        },
        methods: {
            /**
             * 登出
             */
            async logout(){
                this.$confirm('确认要退出登录吗？', '退出登录', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(async () => {
                    let flag = await this.$store.dispatch("user/logout");
                    if(flag){
                        this.$route.name !== 'Home' ? this.$router.push({name: 'Home'}) : null;
                        this.$msg.success("登出成功");
                    }
                }).catch(() => {

                })
            },
            /**
             * 处理下拉指令
             * @param command 指令
             */
            handleCommand(command){
                if(command === "my"){
                    this.$route.name !== 'My' ? this.$router.push({name: 'My'}) : null
                }else if(command === "logout"){
                    this.logout();
                }
            },
            /**
             * 查询文章
             */
            search() {
                this.$store.dispatch("article/search", this.queryParam);
                this.$route.name !== 'Home' ? this.$router.push({name: 'Home', params: {query: true}}) : null
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    /deep/.el-menu--horizontal>.el-menu-item.is-active{
        border-bottom: 2px solid white;
    }
    .right:hover *{
        color: #303133;
    }
    .container{
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .right{
        float: right !important;
    }
</style>